/* * @Author: byron * @Date: 2022-02-17 01:26:47 * @LastEditTime: 2022-02-17
01:26:47 */

<!--
 * @Author: byron
 * @Date: 2021-10-22 21:16:26
 * @LastEditTime: 2022-02-18 22:10:40
-->
<template>
    <div>
        <page-header title="日记列表" describe="">
            <div
                class="search-warp"
                style="display: flex; justify-content: space-between"
            >
                <div class="search-input" style="width: 300px">
                    <a-input-search
                        v-model:value="searchValue"
                        placeholder="搜索内容"
                        size="default"
                        @search="onSearch"
                    />
                </div>

                <a-button
                    type="primary"
                    @click="showAddModel"
                    style="margin-left: 30px"
                    >添加日记</a-button
                >
            </div>
        </page-header>
        <page-layout>
            <a-table :columns="columns" :data-source="diaryList">
                <template #bodyCell="{ column, record }">
                    <!-- <template v-if="column.key === 'avatar'">
                    <a-avatar shape="square" :size="64" :src="record.avatar">
                    </a-avatar>
                </template> -->
                    <template v-if="column.key === 'status'">
                        <a-switch
                            v-model:checked="record.status"
                            checked-children="启用"
                            un-checked-children="禁用"
                            @click="clickStatus(record)"
                        />
                    </template>
                    <template v-else-if="column.key === 'action'">
                        <span>
                            <a-button
                                type="primary"
                                :size="size"
                                style="margin-right: 5px"
                                @click="showDrawer(record)"
                                >编辑</a-button
                            >
                            <a-popconfirm
                                title="确认删除此分类？"
                                ok-text="确认"
                                cancel-text="取消"
                                @confirm="delDiaryBtn(record.id)"
                                @cancel="cancel"
                            >
                                <a-button danger :size="size">删除</a-button>
                            </a-popconfirm>
                        </span>
                    </template>
                </template>
            </a-table>
        </page-layout>
        <!-- 增加日记弹窗 -->
        <a-modal v-model:visible="addModel" title="添加日记" @ok="handleOk">
            <template #footer>
                <a-button key="back" @click="handleCancel">取消</a-button>
                <a-button
                    key="submit"
                    type="primary"
                    :loading="loading"
                    @click="handleOk"
                    >确定</a-button
                >
            </template>
            <div class="emoji-warp" style="margin-bottom: 10px">
                <p-emoji @handle="handleEmoji"></p-emoji>
            </div>

            <a-textarea
                v-model:value="data.content"
                show-count
                :maxlength="250"
                :rows="8"
            />
        </a-modal>
    </div>
</template>
<script>
import { addDiary, deleteDiary, updateStatusDiary } from '@/api/index.js'
import { getDiary } from '@/api/index.js'
import { message } from 'ant-design-vue'
import { reactive, ref } from 'vue'
export default {
    setup() {
        const data = reactive({
            content: '',
            state: 1,
        })
        const addModel = ref(false)
        const diaryList = ref([])
        const _getDiary = async () => {
            const { data: r } = await getDiary()
            diaryList.value = r.data.map((e) => {
                e.status = e.state ? true : false
                return e
            })
        }

        _getDiary()

        const handleCancel = () => {
            message.info('取消添加日记')
            addModel.value = false
        }
        const showAddModel = () => {
            addModel.value = true
        }
        const handleOk = async () => {
            const { data: r } = await addDiary(data)
            if (r.code == 200) {
                message.success('添加日记成功')
                addModel.value = false
                _getDiary()
                return
            }
            message.error(r.msg)
            return
        }

        const delDiaryBtn = async (id) => {
            const { data: r } = await deleteDiary(id)
            if (r.code == 200) {
                message.success('删除日记成功')
                _getDiary()
                return
            }
            message.error(r.msg)
            return
        }
        // 更改状态
        const clickStatus = async (record) => {
            const data = {
                id: record.id,
                status: record.status ? 1 : 0,
            }
            const { data: r } = await updateStatusDiary(data)
            if (r.code == 200) {
                message.success('更新状态成功')
                return
            }
            message.error(r.msg)
            return
        }
        const handleEmoji = (emoji) => {
            console.log(emoji)
            data.content += emoji
            console.log(data.content)
        }
        return {
            cancel: () => {},
            delDiaryBtn,
            handleOk,
            diaryList,
            addModel,
            handleCancel,
            showAddModel,
            data,
            handleEmoji,
            clickStatus,
            size: 'default',
            columns: [
                {
                    title: 'id',
                    dataIndex: 'id',
                    key: 'id',
                },
                {
                    title: '内容',
                    dataIndex: 'content',
                    key: 'content',
                    width: '60%',
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                },
                {
                    title: '时间',
                    dataIndex: 'time',
                    key: 'time',
                },
                {
                    title: '操作',
                    width: 200,
                    key: 'action',
                },
            ],
        }
    },
}
</script>
<style lang="less"></style>
